<template>
	 <ex-dialog v-model="visible" draggable :title="form.roleName ? form.roleName : (form.id ? form.roleName : '新增')"
  width="700" :contentHeight="450">

	  <template #default>
		<el-tabs v-model="activeName"  style="height: 100%">
		  <el-tab-pane label="基本信息" name="base" style="height: 100%">
			<el-row :gutter="80">
			  <el-col :lg="24">
				<el-form :model="form" :rules="button_rules" ref="dialogForm" label-width="100px" label-position="left">
				  <el-form-item label="所属组织机构" prop="orgId">
            <ex-cascader v-model="form.orgId" dict-code="SysOrganization"></ex-cascader>
          </el-form-item>
<!--				  <el-form-item label="角色编码" prop="roleCode">-->
<!--					<el-input v-model="form.roleCode" clearable placeholder="角色编码"></el-input>-->
<!--				  </el-form-item>-->
				  <el-form-item label="角色名称" prop="roleName">
					<el-input v-model="form.roleName" clearable placeholder="角色名字"></el-input>
				  </el-form-item>
				  <el-form-item label="排序" prop="orderWeight">
					<el-input v-model="form.orderWeight" clearable placeholder="排序"></el-input>
				  </el-form-item>
				  <el-form-item label="备注" prop="description">
					<el-input v-model="form.description" clearable placeholder="备注"></el-input>
				  </el-form-item>
				</el-form>
			  </el-col>
			</el-row>
		  </el-tab-pane>
		  <el-tab-pane label="菜单权限" name="SysMenu" style="height: 100%">
			<ex-rel-table ref="roleRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.menu.treeData" default-expand-all></ex-rel-table>
		  </el-tab-pane>
<!--		  <el-tab-pane label="专用字典" name="SysDic" style="height: 100%">-->
<!--			<ex-rel-table ref="roleRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.dic.treeData" default-expand-all></ex-rel-table>-->
<!--		  </el-tab-pane>-->
      <el-tab-pane label="管理分类" name="ManageCategory" style="height: 100%">
        <ex-rel-table ref="ManageCategoryRelTable" size="small" name="ManageCategory"  :rel-entity="form" :treeApi="this.$API.asset.assetcategory.treeData" default-expand-all></ex-rel-table>
      </el-tab-pane>
<!--      <el-tab-pane label="查看分类" name="ReadCategory" style="height: 100%">-->
<!--        <ex-rel-table ref="ReadCategoryRelTable" size="small" name="ReadCategory" :rel-entity="form" :treeApi="this.$API.asset.assetcategory.treeData" default-expand-all></ex-rel-table>-->
<!--      </el-tab-pane>-->
<!--		  <el-tab-pane label="专用处理方式" name="Sysprocesstype" style="height: 100%">-->
<!--			<ex-rel-table ref="processtypeRelTable" size="small" :rel-entity="form" :treeApi="this.$API.asset.processType.treeData" default-expand-all></ex-rel-table>-->
<!--		  </el-tab-pane>-->
<!--		  <el-tab-pane label="可用资产卡片分组" name="Syscardgroup" style="height: 100%">-->
<!--			<ex-rel-table ref="cardgroupRelTable" size="small" :rel-entity="form" :treeApi="this.$API.asset.processType.treeData" default-expand-all></ex-rel-table>-->
<!--		  </el-tab-pane>-->
		</el-tabs>
	  </template>
	  <template #footer>
		<div style="flex: auto;text-align: center">
		  <el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
		  <el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
		  <el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
		</div>
	  </template>

	</ex-dialog>
  </template>

  <script>
  import scIconSelect from '@/components/scIconSelect'
  import ExRelTable from "@/components/exRelTable/index.vue";
  import ExCascader from "@/components/exCascader/index.vue";
  import entity from "@/constant/model/entity";
  import exDialog from '@/components/exDialog';
  import BaseTemplate from "@/utils/baseTemplate";

  export default {
	computed: {
	},
	emits: ['success'],
	components: {
    ExCascader,
	  ExRelTable,
	  scIconSelect,
	  exDialog
	},
	props: {
	  menu: {
		type: Object, default: () => {
		}
	  },
	},
	data() {
	  return {
		activeName: 'base',
		visible: false,
		form: {
		  id: "",
		  roleCode: "",
		  roleName: "",
		  orgId: "",
		  description: "",
		  dataAuth:""
		},
		deptOptions: [],
		deptProps: {
		  value: 'levelCode',
		  label: 'label',
		  checkStrictly: true,
		  emitPath:false,
		},
		authOptions: [{value:0,label:"全部"},{value:1,label:"本机构"},{value:2,label:"含下级"},{value:3,label:"下厘机构"}],
      authProps: {
        value: 'Code',
        label: 'label',
        checkStrictly: true,
        emitPath:false,
      },
		button_rules: {
			roleName: [
			{required: true, message: "请输入角色名称", trigger: "blur"},
		  ],
		},
		loading: false,
		oldForm: null,
	  }
	},
	watch: {},
	mounted() {

	},
	onLoad() {
	},
	methods: {
		async initData() {
			this.deptOptions = await this.$cache.tree.options(this.$API.system.dept.treeData.storeName, {});
		},
	  relHandler(relMap) {
		if (!this.form.relMaps) {
		  this.form.relMaps = {};
		}
		for (let key in relMap) {//清空旧的数据
		  this.form.relMaps[key] = {};
		}
		//重新赋值新数据
		Object.assign(this.form.relMaps, relMap);
	  },

	  //显示
	  open(entity) {
		this.form = Object.assign({}, entity);
		this.oldForm = Object.assign({}, this.form);
		this.visible = true;
		this.activeName = "base";
		this.initData();
	  },
	  //保存
	  async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
		if (valid) {
		  try {
			this.loading = true
			var res;
			if (this.form.id) {
			  res = await this.$API.system.role.edit.post(this.form)
			} else {
			  res = await this.$API.system.role.add.post(this.form)
			}
			if (res.code === 2000) {
			  this.$emit('success');
			  this.$message.success(this.$t("code."+res.code));
			  this.visible = false;
				this.$store.dispatch("commit",entity.SysRole.name);
			} else {
			  this.$message.warning(res.message)
			}
		  } finally {
			this.loading = false
		  }
		}
	  },
	}
  }
  </script>

  <style scoped>
  h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
  }

  [data-theme="dark"] h2 {
	color: #fff;
  }

  </style>
